<template>
  <view class="login">
    <view class="login-main">
      <!-- 顶部LOGO -->
      <view class="login-logo flex-center">
        <image src="/static/image/login_logo.png"></image>
      </view>

      <!-- 登录方式切换 -->
      <view class="divider">
        <text v-if="wechatLogin" @click="toggleLogin" >账号密码登录 >></text>
        <text v-else @click="toggleLogin">微信快捷登录 >></text>
      </view>

      <!-- 微信登录 -->
      <template v-if="wechatLogin">
        <view class="divider">无需输入，一键快速注册/登录</view>
        <button class="wx-login-btn" @click="handleWechatLogin">
          <image src="/static/tab_img/wx.png" class="wx-icon"></image>
          <text>微信授权登录</text>
        </button>
      </template>

      <!-- 账号登录 -->
      <template v-else>
        <view class="login-form">
          <view class="input-group">
            <view class="input-item">
              <input type="number" v-model="username" placeholder="请输入手机号" maxlength="11" />
            </view>
            <view class="input-item">
              <input type="password" v-model="password" placeholder="请输入密码" />
            </view>
          </view>
          <button class="login-btn" @click="submit">立即登录</button>
        </view>

        <!-- 辅助功能 -->
        <view class="login-actions">
          <text @click="chuce">立即注册</text>
          <text @click="mima">忘记密码</text>
        </view>
      </template>

      <!-- 用户协议 -->
      <view class="agreement">
        <label class="agreement-check">
          <checkbox :checked="agreementChecked" @click="toggleAgreement" />
          <text>我已阅读并同意</text>
        </label>
        <text class="link">《用户协议》</text>
        <text>和</text>
        <text class="link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wechatLogin: true,
      username: '',
      password: '',
      agreementChecked: false,
	  userId:0,
	  shopId:0,
    };
  },
  methods: {
    toggleLogin() {
      this.wechatLogin = !this.wechatLogin;
    },
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked;
    },
    handleWechatLogin() {
      if (!this.agreementChecked) {
        return uni.showToast({ title: '请先同意用户协议', icon: 'none' });
      }
      // 保持原有微信登录逻辑
      const appid = 'wxf28bfe61d7fa4021';
	  const jump_url = 'http://wz.syrcj.com/h5/#/pages/we/auth-back?shop_id=' + this.shopId +'&user_id='+ this.userId;
      const redirect_uri = encodeURIComponent(jump_url);
	  const state = this.shopId + '_'+ this.userId;
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
    },
    // 保留原有登录方法
    async submit() {
      if (!this.agreementChecked) {
        return uni.showToast({ title: '请先同意用户协议', icon: 'none' });
      }
      // 保持原有登录逻辑...
    },
    // 保留原有导航方法
    chuce() {
      uni.navigateTo({ url: '/pages/login/register/register' });
    },
    mima() {
      uni.navigateTo({ url: '/pages/login/register/rpassword' });
    }
  },
  onLoad: function(options) {
  	this.shopId = uni.getStorageSync('shopId');
  	this.userId = uni.getStorageSync('userId');
  },
};
</script>

<style lang="scss">
.login {
  padding: 60rpx 40rpx;

  .login-logo {
    width: 200upx;
    height: 200upx;
    margin: 0 auto 60rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }

  .login-type {
    margin-bottom: 60rpx;
    color: #007AFF;
    font-size: 28rpx;
  }
 

  .divider {
    color: #999;
    text-align: center;
    margin: 40rpx 0;
  }

  .wx-login-btn {
    background: #07C160;
    color: white;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .wx-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }
  }

  .login-form {
    .input-item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      border: 1rpx solid #eee;
      border-radius: 50rpx;
      
      input {
        height: 60rpx;
        font-size: 28rpx;
      }
    }
  }

  .login-actions {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
    color: #007AFF;
    font-size: 26rpx;
  }

  .agreement {
    margin-top: 60rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .link {
      color: #007AFF;
      margin: 0 10rpx;
    }
    
    checkbox {
      transform: scale(0.8);
      margin-right: 10rpx;
    }
  }
}
</style>
